import React from 'react'
import ReactDOM from 'react-dom'

const { Provider, Consumer } = React.createContext()
class App extends React.Component {
  state = {
    num: 23333,
  }
  render() {
    return (
      <Provider value={this.state.num}>
        <div>
          <h1>父组件标题</h1>
          <Extends />
        </div>
      </Provider>
    )
  }
}

const Extends = () => (
  <>
    <h2>h2标题</h2>
    <Three />
  </>
)
const Three = () => (
  <>
    <h3>h3标题</h3>
    <Child />
  </>
)
const Child = () => (
  <div>
    <h3>h3标题</h3>
    <div>{2222}</div>
    <Consumer>{(data) => <span>data表示接收到的参数---{data}</span>}</Consumer>
    <Consumer>{(data) => <div>{data}</div>}</Consumer>
  </div>
)
ReactDOM.render(<App />, document.getElementById('root'))
